<template>
  <div>
    <div class="m-3 grid grid-cols-4">
      <div><Input class="w-2/3" v-model="eid" placeholder="请输入工号" style="width: 100px;"></Input></div>
      <div><Input class="w-2/3" v-model="ename" placeholder="请输入姓名" style="width: 100px;"></Input></div>
      <div><Input class="w-2/3" v-model="edept" placeholder="请输入部门" style="width: 100px;"></Input></div>
      <div>
        <Button @click="search()" type="primary">搜索</Button>
      </div>
    </div>
    <div class="m-3">
      <my-table :listColumns="listColumns" :listData="listData"/>
    </div>

    <Modal
        v-model="showModal"
        title="请假详情"
        @on-ok=" ()=>{confirm()}"
        @on-cancel="()=>{showModal=false}">
      <div v-if="showData" class="space-y-3">
        <div v-for="(item,idx) in Object.keys(showData)" :key="idx">
          <div v-if="mapping[item]!==undefined" class="p-3 bg-white shadow rounded-lg">
            <h3 class="text-xs border-b">
              {{ mapping[item].name }}
            </h3>
            <p class="font-sans">
            <div v-if="mapping[item].type==='time'">
              <DatePicker v-model="date">
              </DatePicker>
              <TimePicker v-model="mapping[item].value">
              </TimePicker>
            </div>
            <Input v-else-if="mapping[item].type==='text'" :value="mapping[item].value"></Input>
            <Select v-else-if="mapping[item].type==='select'"
                    v-model="mapping[item].value"
                    :value="attent_mapping[mapping[item].value]">
              <Option v-for="(i,index) in mapping[item].options" :value="mapping[item].options[index]"
                      :key="5445+index">
                {{ i }}
              </Option>
            </Select>
          </div>
        </div>
      </div>
    </Modal>

  </div>
</template>
<script>
import MyTable from "@/components/Mytable.vue";
import {deleteAttendant, getAttendance, updateAttendant} from "@/api/attendance/attendance";
import dayjs from "dayjs";

export default {
  name: 'participation',
  components: {
    MyTable,
  },
  data() {
    return {
      showModal: false,
      eid:'',
      ename:'',
      edept:'',
      copyListData:[],
      showData: null,
      date: dayjs().format('YYYY-MM-DD'),
      mapping: {
        "user_id": {name: "工号", type: "text", value: null},
        "dept_id": {name: "部门", type: "text", value: null},
        "attendant_status": {name: "出勤状况", type: "select", options: ["正常", "迟到", "早退", "缺勤"], value: null},
        "start_time": {name: "上班时间", type: "time", value: dayjs().format('HH:mm:ss')},
        "end_time": {name: "下班时间", type: "time", value: dayjs().format('HH:mm:ss')},
      },
      attent_mapping: {
        0: "正常",
        1: "迟到",
        2: "早退",
        3: "缺勤",
      },
      listColumns: [
        {title: '工号', key: 'user_id'},
        { title: '姓名', key: 'username' },
        {title: '部门', key: 'deptname'},
        {title: '出勤状况', key: 'attendant_status'},
        {title: '上班时间', key: 'start_time'},
        {title: '下班时间', key: 'end_time'},
        {
          title: '操作', key: 'operate',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small',

                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.showItem(params)
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.deleteAttendant(params.row.id)
                  }
                }
              }, '删除')
            ]);
          }
        }
      ],
      listData: [],
    }
  },
  created() {
    getAttendance(null).then(res => {
      this.listData = res.data.data
      this.listData.filter(item => {
        item.attendant_status = this.attent_mapping[+item.attendant_status]
        item.start_time = dayjs(item.start_time).format('YYYY-MM-DD HH:mm:ss')
        item.end_time = dayjs(item.end_time).format('YYYY-MM-DD HH:mm:ss')
      })
      this.copyListData = this.listData.slice(0, this.listData.length)
    })
  },
  methods: {
    deleteAttendant: function (param) {
      deleteAttendant(param).then(res => {
        let response = res.data
        if (response.code === 200) {
          this.$Message.success(response.message)
          this.getData()
        } else {
          this.$Message.error(response.message)
        }
      })
    },
    getData: function () {
      getAttendance(null).then(res => {
        this.listData = res.data.data
        this.listData.filter(item => {
          item.attendant_status = this.attent_mapping[+item.attendant_status]
          item.start_time = dayjs(item.start_time).format('YYYY-MM-DD HH:mm:ss')
          item.end_time = dayjs(item.end_time).format('YYYY-MM-DD HH:mm:ss')
        })
      })
    },
    showItem: function (param) {
      this.showModal = true
      this.showData = param.row
      for (let key in this.mapping) {
        this.mapping[key].value = this.showData[key]
      }
      if(this.mapping.attendant_status.value === '正常') {
        this.mapping.attendant_status.value = 0
      }else if(this.mapping.attendant_status.value === '迟到') {
        this.mapping.attendant_status.value = 1
      }
      else if(this.mapping.attendant_status.value === '早退') {
        this.mapping.attendant_status.value = 2
      }
      else if(this.mapping.attendant_status.value === '缺勤') {
        this.mapping.attendant_status.value = 3
      }
      else if(this.mapping.attendant_status.value === '请假') {
        this.mapping.attendant_status.value = 4
      }


    },
    confirm: function () {
      this.showModal = false
      let formData = new FormData()
      for (let key in this.mapping) {
        if(this.mapping[key].value === null){
          this.$Message.error('请填写完整信息')
          return
        }
        if (key === 'start_time' || key === 'end_time') {
          let date = dayjs(this.date).format('YYYY-MM-DD')
          this.mapping[key].value = date + ' ' + this.mapping[key].value
          this.mapping[key].value = dayjs(this.mapping[key].value).format('YYYY-MM-DD HH:mm:ss')
          formData.append(key, this.mapping[key].value)
        }else {
          formData.append(key, this.mapping[key].value)
        }
      }
      updateAttendant(formData).then(res => {
        let response = res.data
        if (response.code === 200) {
          this.$Message.success(response.message)
          this.getData()
        } else {
          this.$Message.error(response.message)
        }
      }).then(()=>{
        this.getData()
      }).then(()=>{
        this.mapping= {
          "user_id": {name: "工号", type: "text", value: null},
          "dept_id": {name: "部门", type: "text", value: null},
          "attendant_status": {name: "出勤状况", type: "select", options: ["正常", "迟到", "早退", "缺勤"], value: null},
          "start_time": {name: "上班时间", type: "time", value: dayjs().format('HH:mm:ss')},
          "end_time": {name: "下班时间", type: "time", value: dayjs().format('HH:mm:ss')},
        }
      })
    },
    search() {
      console.log(this.listData)
      console.log(this.eid, this.ename, this.edept)
      if(this.eid!==''){
        this.listData = this.listData.filter(item=>{
          return item.user_id.toString() === this.eid.toString()
        })
      }
      if(this.ename!==''){
        this.ename = this.ename.trim()
        this.listData = this.listData.filter(item=>{
          return item.username?.indexOf(this.ename) !== -1
        })
      }
      if(this.edept!==''){
        this.listData = this.listData.filter(item=>{
          return item.deptname?.indexOf(this.edept) !== -1
        })
      }
      if(this.eid === '' && this.ename === '' && this.edept === ''){
        getAttendance(null).then(res => {
          this.listData = res.data.data
          this.listData.filter(item => {
            item.attendant_status = this.attent_mapping[+item.attendant_status]
            item.start_time = dayjs(item.start_time).format('YYYY-MM-DD HH:mm:ss')
            item.end_time = dayjs(item.end_time).format('YYYY-MM-DD HH:mm:ss')
          })
          this.copyListData = this.listData.slice(0, this.listData.length)
        })
      }
    },
  }
}
</script>
<style scoped></style>